<template>
  <div v-if="data.length">
    <v-chart :forceFit="true" :height="height" :data="data" padding="auto">
      <v-facet type="rect" :fields="['type']" :padding="padding" :showTitle="false" :eachView="eachView" />
    </v-chart>
  </div>
</template>

<script>
// const data = [
//   {
//     type: '其他',
//     value: 90
//   },
//   {
//     type: '低危',
//     value: 28
//   },
//   {
//     type: '中危',
//     value: 22
//   },
//   {
//     type: '高危',
//     value: 22
//   }
// ]
import config from '@/defaultSettings'
const colorArr = ['#CB93FF', '#3BA1FF', '#6AD389', '#6AD389', '#FCDB56', 'FCDB56']
const eachView = function(view, facet) {
  var data = facet.data
  // console.log('data')
  // console.log(data)
  var color = void 0
  if (data[0].type === '低危') {
    color = config.echarts_base_color3[1]
  } else if (data[0].type === '中危') {
    color = config.echarts_base_color3[0]
  } else if (data[0].type === '高危') {
    color = config.echarts_base_color3[2]
  } else if (data[0].type === '紧急') {
    color = config.echarts_base_color3[4]
  } else {
    // color = colorArr[data[0].index]
    color = config.echarts_base_color3[3]
  }
  data.push({
    type: '',
    value: 100 - data[0].value
  })
  view.source(data)
  view.coord('theta', {
    radius: 1,
    innerRadius: 0.8
  })
  view
    .intervalStack()
    .position('value')
    .color('type', [color, '#eceef1'])
    .opacity(1)
  view.guide().html({
    position: ['50%', '50%'],
    html:
      '<div class="g2-guide-html"><p class="title">' +
      data[0].type +
      '</p><p class="value">' +
      (data[0].value + '%') +
      '</p></div>'
  })
}
export default {
  props: {
    height: {
      type: Number,
      default: 245
    },
    padding: {
      type: Object,
      default: () => {
        return { top: 0, right: 10, bottom: 0, left: 5 }
      }
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  mounted() {
    this.setStyle()
  },
  methods: {
    setStyle() {
      const id = 'legend-html'
      if (document.getElementById(id)) {
        return
      }
      const styleTxt = `
        .g2-guide-html {
            
            vertical-align: middle;
            text-align: center;
            line-height: 1.5
        }

        .g2-guide-html .title {
            font-size: 12px;
            color: #8c8c8c;
            font-weight: 300;
        }

        .g2-guide-html .value {
            font-size: 18px;
            color: #000;
            font-weight: bold;
        }
      `
      const style = document.createElement('style')
      style.setAttribute('id', id)
      style.innerHTML = styleTxt
      document.getElementsByTagName('head')[0].appendChild(style)
    }
  },
  data() {
    return {
      // data: data,
      eachView
    }
  }
}
</script>
